<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!-- Title -->
    <title>The Palatin - Hotel &amp; Resort Template</title>
	
    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.ico">
    <!-- Core Stylesheet -->
    <link rel="stylesheet" href="style.css">
	<!-- jQuery-2.2.4 js -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=lFGmqMHt6bfgLhtgoGU8p1k1RkCIxPKk"></script>
	<!-- <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	 <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>  -->
	<script src="js/distpicker.data.js"></script>
	  <script src="js/distpicker.js"></script>
	 <script type="text/javascript">
 		$(".selector").css("display",true);
    //页面加载就要进行ajax请求
    $(document).ready(function(){
    	//页面加载调用百度地图
    	baiduMap();
    	$.ajax({
    		async:true,
    		url:"${pageContext.request.contextPath}/PageDisplayServlet",
    		type:"GET",
    		data:{op:"pageDisplay"},
    		dataType:"json",
    		success:function(result,status,xhl){
    			console.log(result);
    			fillMessage(result);
    		},
    		//请求失败时的响应函数
    		error:function(xhr,status,error){
    			console.log("请求失败");
    		}
    	});
    	
    		$("#province1").css("display","block");
    		$("#city1").css("display","block");
    		$("#district1").css("display","block"); 
    });
    //定义一个填充页面信息的方法
    function fillMessage(result){
    	 for(var i = 0;i<result.length;i++){
    		$("#homestayDisplay").append(
    				"<div class=\"col-12 col-md-6 col-lg-4\">"
                   +"<div class=\"single-rooms-area wow fadeInUp\" data-wow-delay=\"100ms\">"
                   +"<div class=\"bg-thumbnail bg-img\" style=\"background-image: url(${pageContext.request.contextPath}/FileDownloadServlet?fileName="+result[i].homestayPicture+");\">"
                   +"</div>"
                   +"<p class=\"price-from\">"+result[i].homestayName+"</p>"
                   +"<div class=\"rooms-text\" >"
                   +"<div class=\"line\"></div>"
                   +"<p style=\"display: -webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;work-wrap:break-word;overflow:hidden;text-overflow:ellipsis;white-space: normal!important;\">"+result[i].homestayIntroduce+"</p>"
                   +"</div>"
                   +"<a href=\"room.jsp?homestayId="+result[i].homestayId+"&homestayName="+result[i].homestayName+"\" class=\"book-room-btn btn palatin-btn\">查看详情</a>"  
                   +"</div>"
                   +"</div>"		
    			   );
    	} 
    	
    }
    //定义百度地图函数
     function baiduMap(){
    	// 百度API
    	var map = new BMap.Map("allmap");
    	var point = new BMap.Point(116.331398,39.897445);
    	map.centerAndZoom(point,12);
    	var city;
    	var geolocation = new BMap.Geolocation();
    	geolocation.getCurrentPosition(function(r){
    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
    			var mk = new BMap.Marker(r.point);
    			map.addOverlay(mk);
    			map.panTo(r.point);
					//获取当前省份
					var province = r.address.province;
					//获取当前城市名称selectCity
					var city = r.address.city;
					console.log(province);
					//$("#currentProvince").text(province);
					$("#currentCity").text(city);
					} else {
						alert('failed' + this.getStatus());
					}
				}, {
					enableHighAccuracy : true
				})
				map.enableScrollWheelZoom();
				map.enableContinuousZoom();
			}
    //通过城市名定位的百度地图
    function baiDuMapByCityName(cityName){
    	//清空allmapdiv
    	$("#allmap").empty();
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	var point = new BMap.Point(116.331398,39.897445);
    	map.centerAndZoom(point,11);
    	map.centerAndZoom(cityName,15); // 用城市名设置地图中心点 
    	map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    	map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    }
    //表单提价的ajax请求
   function findHomeByConditionFun(){
	 //表单数据不带文件的ajax请求
	  	  var fromData = $("#findHomeByCondition").serialize();
	    	//获取下拉框中被选中的城市名
	    	var cityName = $("#city1 option:selected").val();
	    	//调用按城市名定位的地图
	    	baiDuMapByCityName(cityName);
	    	//填充欢迎界面的城市名
	    	$("#currentCity").text(cityName);
	  	  //发送ajax请求
	  	  $.ajax({
	  		  async:true,
	  		  url:"${pageContext.request.contextPath}/PageDisplayServlet?op=findHoomByCondition",
	  		  type:"GET",
	  		  data:fromData,
	  		  dataType:"json",
	  		  success:function(result,status,xhl){
	    			console.log("123"+result);
	    			//清空民宿列表
	    			$("#homestayDisplay").empty();
	    			fillMessage(result); 
	    		},
	    		//请求失败时的响应函数
	    		error:function(xhr,status,error){
	    			console.log("请求失败");
	    		}
	  	  });
    }
    
		</script>
		<!-- 天气预报 -->
	<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" media="all"/>
	</head>
	
	<body>
		 <!-- Preloader -->
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="cssload-container">
            <div class="cssload-loading"><i></i><i></i><i></i><i></i></div>
        </div>
    </div>

    <!-- ##### Header Area Start ##### -->
    <header class="header-area">
        <!-- Navbar Area -->
        <div class="palatin-main-menu">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Menu -->
                    <nav class="classy-navbar justify-content-between" id="palatinNav">

                        <!-- Nav brand -->
                       <a href="index.jsp" class="nav-brand" style="margin-left: -154px;"><img src="img/core-img/logo.png" alt=""></a>
                             <!--   天气预报 -->
                               <!--  <div class="pool-feature">
                                	<input type="text" name="input"/>
                                    <a href="#" class="nav-brand" data-toggle="modal" data-target="#myModal0" id="wether">天气预报</a>
                                </div>  --> 

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"><span></span><span></span><span></span></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu">

                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul id="btn">
                                    <!-- <li><a href="login.jsp" id="doLogin">登录</a></li>
                                    <li><a href="register.jsp" id="doRegister">注册</a></li> -->
                                </ul>

                                <!--  个人中心菜单栏     -->           
	                             <ul>	                                    
	                                <li><a href="#">个人中心</a>
	                                        <ul class="dropdown">
	                                            <li><a href="#" class="personalData login">个人信息</a></li>
	                                            <li><a href="#" class="orderInfo login">订单详情</a></li>
	                                            <li><a href="#" class="collectionInfo login">个人收藏</a></li>
	                                            <li><a href="#" class="updatePassword login">修改密码</a></li>
	                                            <li><a href="login.jsp" class="outLogin">切换账号</a></li> 
	                                        </ul>
	                                </li>                                   
	                             </ul> 
	                               <!--   天气预报 -->
                                <ul>
                                	<!-- <input type="text" name="input"/> -->
                                    <li><a href="#" class="nav-brand" data-toggle="modal" data-target="#myModal0" id="wether">天气预报</a></li>
                                </ul> 
                                </ul>  
                                <ul>
                                	<li><a href="${pageContext.request.contextPath}/back/login.jsp">进入后台</a></li>
                                </ul>                                 
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ##### Header Area End ##### -->

    <!-- ##### Hero Area Start ##### -->
    <section class="hero-area">
        <div class="hero-slides owl-carousel">

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-1.jpg);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                 <h2 data-animation="fadeInUp" data-delay="500ms">一个值得遇见的地方</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">迷人的民宿，好似一家富有情怀的小酒馆，里面藏着各种美味的酒，休憩之日，与三五老友小聚一餐，醉人的佳酿入口，思绪慢慢的走...</p>
                                <a href="#" class="btn palatin-btn mt-50" data-animation="fadeInUp" data-delay="900ms">ZhuLiGuan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-2.jpg);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                <h2 data-animation="fadeInUp" data-delay="500ms">一个充满回忆的地方</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">那儿有儿时的故事，那儿有小伙伴的背影，那儿有难忘的经历，那儿有岁月的温度,民宿之中，家的味道...</p>
                                <a href="#" class="btn palatin-btn mt-50" data-animation="fadeInUp" data-delay="900ms">ZhuLiGuan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-3.jpg);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                <h2 data-animation="fadeInUp" data-delay="500ms">一个令人向往的地方</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">天空露台，幽深小径，纯净的天空，梦幻的远方，紫华之外，安静之上，或栖于村寨，享受原始与淳朴；亦面朝大海，再见春暖与花开。在这摆脱平日的束缚，在这找寻最本真的情怀，在松绑的世界中，守住心中的那份自然</p>
                                <a href="#" class="btn palatin-btn mt-50" data-animation="fadeInUp" data-delay="900ms">ZhuLiGuan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- ##### Hero Area End ##### -->

    <!-- ##### Book Now Area Start ##### -->
    <div class="book-now-area" style="display: block">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10" style="padding-bottom:0px">
                    <div class="book-now-form" style="padding-bottom:0px" data-toggle="distpicker">
                        <form action="" id="findHomeByCondition" style="padding-bottom:0px">
                            <!-- Form Group -->
                            <div  class="form-group" style="margin-bottom:-100px" id="selectProvince">
                                <label for="select1">选择省份</label>
                                <!-- <label class="sr-only" for="province1">Province</label> -->
                                <select  class="form-control selector" id="province1" name="province"></select>
                                <!-- <label class="sr-only" for="province1">Province</label> -->

                          <!--   <select class="form-control selector" id="province1" name="province"></select> 

                            <!-- <select class="form-control selector" id="province1" name="province"></select> 

                                <select  class="form-control selector" id="province1" name="province"></select> -->
                            </div>
                            
                            <div class="form-group" style="margin-bottom:-100px" id="selectCity">
                                <label for="select1">选择城市</label>
                                <label class="sr-only" for="city1">City</label>
                                <select class="form-control selector" id="city1" name="city"></select>
                            </div>
                            
                            <div class="form-group" style="margin-bottom:-100px" id="selectArea">
                                <label for="select1">选择地区</label>
                                <label class="sr-only" for="district1">District</label>
                                <select class="form-control selector" id="district1" name="area"></select>
                            </div>
							
							<!-- Form Group -->
                            <div class="form-group" style="margin-bottom:-100px">
                                <label for="select1">风格</label>
                                <select class="form-control" id="selectStyle" name="homeStyle">
                                  <option>选择风格</option>
                                  <option>简约</option>
                                  <option>复古</option>
                                  <option>淡雅</option>
                                </select>
                            </div>
                             <button type="button" name="" id="submoitBut" onclick="findHomeByConditionFun()" style="margin-bottom:-100px">筛选</button> 
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ##### Book Now Area End ##### -->

	<section class="rooms-area section-padding-100-0" style="padding-top:0px">
		    <div id="allmap" style="width: 950px; height: 300px; overflow: hidden; margin: 0 auto;">
				<!-- 百度地图的归宿 -->
			</div>
			 <h1 style="width:100%;text-align:center">欢迎来到
			 <span id="currentProvince"></span>
			 <span id="currentCity"></span>
			 	竹里馆民宿</h1>
        <div class="container">
			<div class="row justify-content-center">
                <div class="col-12 col-lg-6">
                    <div class="section-heading text-center">
                   <!--  <div class="line-"></div> -->
                        <p>本网站旨在给用户最好的体验，找到最符合心意的民宿，享受最美的生活</p>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center" id="homestayDisplay">
            </div>
            
        </div>
    </section>
	
    <!-- ##### Pool Area Start ##### -->
    <section class="pool-area section-padding-100 bg-img bg-fixed" style="background-image: url(img/bg-img/4.png);">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-12 col-lg-7">
                    <div class="pool-content text-center wow fadeInUp" data-wow-delay="300ms">
                        <div class="section-heading text-center white">
                            <div class="line-"></div>
                            <h2>旅游小贴士</h2>
                              <p>1.事先要制定时间、路线、膳宿的具体计划，带好导游图、有关地图及车、船时间表</p>
                              <p>2.提前看好旅游地的天气预报带好必要衣物</p>
                              <p>3.注意备药，如感冒、腹泻以及云南白药等常用药物</p>
                              <p>4.旅游有时会经过一些危险区域景点，这些危险区域，要尽量结伴而行，千万不要独自冒险前往</p>
                              <p>5.注意饮食卫生，在流行性疾病传播季节和寄生虫病流行地区，做好相应的预防工作</p>
                              <p>6.如果是自驾车游，准备好备用轮胎，车程最好在6个小时以内，否则容易造成疲劳</p>
                              <p>7.攀山登高量力而行，以免劳累过度。若出现头痛头昏心跳异常时，应就地休息及时就医</p>
                              <p>8.学习一些简单的急救知识，如心肺复苏，人工呼吸等</p>
                              <p>9.讲文明懂礼貌，尽量不要与人发生争执。当遭遇抢劫时，以保护自身安全为重</p>
                              <p> 10.自身警惕，切忌告诉陌生人过多个人信息。当独自旅游时，可以假装有同伴陪同</p>
                        </div>

                        <div class="row">
                            <div class="col-12 col-sm-4">
                                <div class="pool-feature">
                                    <i class="icon-cocktail-1"></i>
                                    <p>注意饮食</p>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="pool-feature">
                                    <i class="icon-swimming-pool"></i>
                                    <p>安全游泳</p>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="pool-feature">
                                    <i class="icon-beach"></i>
                                    <p>注意防晒</p>
                                </div>
                            </div>
                        </div>
                        <!-- Button -->
                        <a href="#" class="btn palatin-btn mt-50">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ##### Pool Area End ##### -->

    <!-- ##### Rooms Area Start ##### -->
    
    <!-- ##### Footer Area Start ##### -->
    <footer class="footer-area">
        <div class="container">
            <div class="row">

                <!-- Footer Widget Area -->
                <div class="col-12 col-lg-5">
                    <div class="footer-widget-area mt-50">
                        <a href="#" class="d-block mb-5">竹里馆民宿</a>
                        <p>放下行李的那一刻，一切都淡定了，</p>
                        <p>在这就是睡在山海间，住在人情里。</p>
                    </div>
                </div>

                <!-- Footer Widget Area -->
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="footer-widget-area mt-50">
                    </div>
                </div>

                <!-- Footer Widget Area -->
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="footer-widget-area mt-50">
                        <h6 class="widget-title mb-5">加入我们</h6>
                        <img src="img/bg-img/footer-map.png" alt="">
                    </div>
                </div>

                <!-- Copywrite Text -->
				<div class="col-12">
					<div class="copywrite-text mt-30">
						<p>
							<a href="#">
								Copyright &copy;
							</a>
								<script>
									document.write(new Date().getFullYear());
								</script>
								All rights reserved | This template is made with 
								<i class="fa fa-heart-o" aria-hidden="true"></i> by 
								<a href="https://colorlib.com" target="_blank">Colorlib</a>
						</p>
					</div>
				</div>
			</div>
        </div>
    </footer>
    <!-- ##### Footer Area End ##### -->

    <!-- ##### All Javascript Script ##### -->
    <!-- Popper js -->
    <script src="js/bootstrap/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!-- All Plugins js -->
    <script src="js/plugins/plugins.js"></script>
    <!-- Active js -->
    <script src="js/active.js"></script>
    
    <!-- 模态框 -->                            
		<!-- 模态框0：天气预报信息 -->
		<div class="modal fade" id="myModal0">
						<div class="widget-main modal-dialog">
						   <div class="widget-climate-wthree">
								<div class="widget-left">
									<div class="season">
										<div class="degree">
											<h4>城市</h4>
											<h3 id="humidity"></h3>
										</div>
										<div class="date">
											<h6 class="now_time"></h6>
										</div>
									   <div class="clear"> </div>
									</div>
									<div class="season w3">
										<div class="degree">
											<h4>天气</h4>
											<h3 id="info"></h3>
										</div>
										<div class="date">
											<h6 class="now_time"></h6>
										</div>
									   <div class="clear"> </div>
									</div>
									<div class="season agile">
										<div class="degree">
											<h4>风向</h4>
											<h3 id="direct"></h3>
										</div>
										<div class="date">
											<h6 class="now_time"></h6>
										</div>
									   <div class="clear"> </div>
									</div>
									<div class="season">
										<div class="degree">
											<h4>风级</h4>
											<h3 id="power"></h3>
										</div>
										<div class="date">
											<h6 class="now_time"></h6>
										</div>
									   <div class="clear"> </div>
									</div>
									
								</div>		
								<div class="widget-right w3l">
									<p id="week"></p>
									<p id="year_month"></p>
									<h5>Mostly Sunny</h5>
									
									<h2 id="temperature"></h2>
								</div>
							 <div class="clear"> </div>				
						  </div>
						 
					</div>				 
					<!-- 模态框底部 -->
						<!-- <div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div> -->									 
		 </div> 
										 
		<!-- 模态框1：用户个人信息 -->
		<div class="modal fade" id="myModal1">
			<div class="modal-dialog">
				<div class="modal-content" style="width:700px;" align="center">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">个人中心</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<p>用户头像：</p><div id="picture"></div>
							<p>用户名： <div><input type="text" name="username" disabled="disabled" /></div></p>
							<p>性别：<div><input type="text" name="userSex" disabled="disabled" /></div></p>
							<p>电话：<div><input type="text" name="userPhone" disabled="disabled" /></div></p>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框2：订单信息 -->
		<div class="modal fade" id="myModal2">
			<div class="modal-dialog">
				<div class="modal-content" style="width:700px;" align="center">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">订单详情</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
						<div>
							<label>每页
								 <!-- 下拉框 -->
								 <select style="width:50px" id="selectPageSize">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
								 </select>
									 条
								</label> 
								民宿名称：<input type="text" id="kw" value=""/>
								<button class="btn btn-success btn-mini" id="searchBtn" >搜索</button>
								<button class="btn btn-info btn-mini" id="clearSearchBtn"   >清除搜索</button>
							</div>
							<table class="table table-bordered data-table" border="1" style="width: 100%;margin: 10px 0;">		
								<thead>
								<tr align="center">
									<!-- 订单编号  订单名称（民宿名+房号） 总价格 支付状态（未支付 去支付） 添加时间(当点击下单之后，获取系统当前时间)   操作（修改、删除） -->
										<td>订单编号</td>
										<td>订单名称</td>
										<td>总价格</td>
										<td>支付状态</td>
										<td>添加时间</td>
										<td>操作</td>
									</tr>
								</thead>
								<tbody id="content_order">
									<!-- <tr align="center" id="content_order">								
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>
										    <a href="#" class="delete">删除</a>
										</td>
									</tr> -->
								</tbody>
							</table>
							<!-- 分页 -->
							<div id="DataTables_pageInfo"></div>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框3：收藏信息 -->
		<div class="modal fade" id="myModal3">
			<div class="modal-dialog">
				<div class="modal-content" style="width:700px;" align="center">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">个人收藏</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
						<div>
							<label>每页
								 <!-- 下拉框 -->
								 <select style="width:50px" id="selectPageSize1">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
								 </select>
									 条
								</label> 
								民宿名称：<input type="text" id="kw1" value=""/>
								<button class="btn btn-success btn-mini" id="searchBtn1" >搜索</button>
								<button class="btn btn-info btn-mini" id="clearSearchBtn1"   >清除搜索</button>
							</div>
							<table class="table table-bordered data-table" border="1" style="width: 100%;margin: 10px 0;">	
								<thead>
									<tr align="center">
									<!-- 收藏信息：（收藏编号(homeid+userid) + 收藏的民宿 + 收藏时间(点点击收藏按钮之后，获取系统当前时间)+ 操作：删除） -->
										<td>收藏编号</td>
										<td>收藏民宿</td>									
										<td>收藏时间</td>
										<td>操作</td>
									</tr>
								</thead>
								<tbody id="content_collection">
									<!-- <tr align="center">								
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td><a href="#">删除</a></td>
									</tr> -->
								</tbody>
							</table>
							<!-- 分页 -->
							<div id="DataTables_pageInfo1"></div>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框4：修改密码  -->
		<div class="modal fade" id="myModal4">
			<div class="modal-dialog">
				<div class="modal-content">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">修改密码</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<div>原 密 码： <input type="password" placeholder="请输入原密码" name="password"/></div>
							<div>新 密 码： <input type="password" placeholder="请输新密码" name="newPwd" id="new1"/></div>
							<div>再次输入：<input type="password" placeholder="请输入新密码" name="newPwd" id="new2"/></div>
						</div>
					<!-- 模态框底部 -->
						<div class="modal-footer sub">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-secondary sub_pwd" data-dismiss="modal">提交</button>
						</div>											 
			  </div>
			</div>
		</div>
    <script>
		$(document).ready(function(){
			// 获取session中的用户信息
			$("input[name = username]").val("${sessionScope.user.userName}");
			$("input[name = userSex]").val("${sessionScope.user.userSex}");
			$("input[name = userPhone]").val("${sessionScope.user.userPhone}");
		
			var userName = $("input[name = username]").val();
			var fileName = "${sessionScope.user.userPicture}";
			
			if(userName == ""){
				$(document).on("click",".login",function(){
					alert("请先登录");	
				});
				$(".classynav #btn").append("<li><a href=\"login.jsp\" id=\"doLogin\">登录</a></li>"+
                    "<li><a href=\"register.jsp\" id=\"doRegister\">注册</a></li>");
			}else{
				$(".classynav #btn").append("<li><a href=\"#\" id=\"doLogin\">登录</a></li>"+
                "<li><a href=\"register.jsp\" id=\"doRegister\">注册</a></li>");
                $(document).on("click","#doLogin",function(){
                	alert("不能重复登录！")
                });
				
				// --------个人中心的点击，显示个人信息模态框-------
				$(document).on("click",".personalData",function(){
					$('#myModal1').modal('show');	
					$("#picture").empty();
					// 判断是否有头像，有就下载，没有就使用默认的 images/2.jpg
						if(fileName != ""){
							$("#picture").append("<img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+fileName+"\" width=\"50\" height=\"50\" />")
						}else if(fileName == ""){
							$("#picture").append("<img src=\"${pageContext.request.contextPath}/front/images/2.jpg\" width=\"50\" height=\"50\" />")
						}
				});
				// 个人中心的点击，显示订单信息模态框
				$(document).on("click",".orderInfo",function(){
					$('#myModal2').modal('show');
				});
				// 个人中心的点击，显示收藏信息模态框
				$(document).on("click",".collectionInfo",function(){
					$('#myModal3').modal('show');
				});
				// 个人中心的点击，显示修改密码信息模态框
				$(document).on("click",".updatePassword",function(){
					$('#myModal4').modal('show');
				});
				
				// --------修改密码模块--------		
				// 1.判断用户输入的原密码是否正确
				
				 $("input[name = password]").change( function() { 
					 var password = $("input[name = password]").val();
					 $.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
							type:"GET",
							data:{op:"isLogin",password:password,userName:userName},
							dataType:"json",
							success:function(result,status,xhr){
								if(result != null){
									alert("原密码输入正确");	
								}else{
									alert("密码错误，请重新输入！");
									// 密码输入有误，清空密码框，重新输入
									$("input[name = password]").val("");
								}							
							},
							error:function(xhr,status,error){
								alert("异步请求失败!");
							}
					});
				});
				
				// 2.点击提交按钮，判断用户的两次新密码是否一致
				$(document).on("click",".sub .sub_pwd",function(){
					var userNo = "${sessionScope.user.userId}";
					
					var password = $("input[name = password]").val();
					var newPwd1 = $("#new1").val();
					var newPwd2 = $("#new2").val();
					if(newPwd1.trim() == "" && newPwd2.trim() == "" || newPwd1 != newPwd2 || password == ""){
						
						alert("两次密码输入不一致，请重新输入！");
						// 密码输入有误，清空密码框，重新输入
						$("#new1").val("");
						$("#new2").val("");
					}else if(newPwd1.trim().length < 6 || newPwd1.trim().length > 30 || newPwd2.trim().length < 6 || newPwd2.trim().length > 30){
						alert("请密码长度在6~30之间！");
						// 密码输入有误，清空密码框，重新输入
						$("#new1").val("");
						$("#new2").val("");
					}else if(newPwd1 == newPwd2){
						// 当两次密码一致时，发送ajax请求，修改密码，并加密
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/UserUpdateServlet",
							type:"Get",
							data:{op:"updatePassword",newPwd1:newPwd1,userNo:userNo},
							success:function(result,status,xhr){
								console.log("密码修改的json："+result);
								if(result == true){
									alert("密码修改成功！请重新登录！");
									// 修改成功，跳转登录页面重新登录！
									window.location.href = "../front/login.jsp";
								}else if(result == false){
									alert("密码修改失败！");
								}
								
							},
							error:function(xhr,status,error){
								alert("异步请求失败！");
							}
						});
					}
				});		
				
				// --------切换账号模块--------
				// 点击切换账号，返回login.jsp页面，并将账号信息注销
				$(document).on("click",".outLogin",function(){
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/UserUpdateServlet",
						type:"GET",
						data:{op:"outLogin"},
						success:function(result,status,xhr){
							alert("注销账号成功！");
						},
						error:function(xhr,status,error){
							alert("异步请求失败！");
						}
					});
				});
		}
			
			// --------天气预报模块--------
			$(document).on("click","#wether",function(){
				/* 获取输入的城市 */
				var input = $("#currentCity").text();
				console.log(input);
				
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/APIServlet",
					type:"GET",
					data:{op:"getCityWethor",input:input},
					dataType:"json",
					success:function(result,status,xhr){
						console.log(result);
						alert("成功");
						$("#humidity").text(result.result.data.realtime.city_name);
						$("#info").text(result.result.data.realtime.weather.info);
						$("#direct").text(result.result.data.realtime.wind.direct);
						$("#power").text(result.result.data.realtime.wind.power);
						 var myDate = new Date();
						 var month = myDate.getMonth()+1;
						 console.log(result);
						 $("#year_month").text(month + "月  " + myDate.getFullYear() + "年");
						 $("#week").text("星期" + myDate.getDay());
						 $("#temperature").text(result.result.data.realtime.weather.temperature + "℃")
					},
					error:function(xhr,status,error){
						alert("异步请求失败!");
					}
				});
			});
	});
</script>

  <!-- --------订单信息列表-------- -->
<script type="text/javascript">
		$(document).ready(function(){
			$(document).on("click",".orderInfo",function(){
				sendAjax1(1);
			});
			
			// 1.首页
			$(document).on("click","#first1",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax1(1);
			});
			
			// 2.尾页
			$(document).on("click","#last1",function(){
				// 获取总页数
				var lastPageNum1 = $("#pageInfo1").data("pagepages1");
				var pageNum1 = lastPageNum1;
				// 调用发送异步请求的方法,参数是页码
				sendAjax1(pageNum1);
			});
			
			// 3.上一页
			$(document).on("click","#previous1",function(){
				// 获取当前页
				var currentPageNum1 = $("#pageInfo1").data("pagenum1");
				if(currentPageNum1==1){
					alert("已经是第一页,没有上一页!")
				}else{
					var pageNum1 = parseInt(currentPageNum1)-1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax1(pageNum1);
				}
			});
			
			// 4.下一页
			$(document).on("click","#next1",function(){
				// 获取当前页
				var currentPageNum1 = $("#pageInfo1").data("pagenum1");
				// 获取总页数
				var lastPageNum1 = $("#pageInfo1").data("pagepages1");
				if(currentPageNum1==lastPageNum1){
					alert("已经是最后一页,没有下一页!")
				}else{
					var pageNum1 = parseInt(currentPageNum1)+1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax1(pageNum1);
				}
			});
			
			// 5.页码点击事件
			$(document).on("click",".current1",function(){
				 var pageNum1 = $(this).text();
				// 调用发送异步请求的方法,参数是页码
				 sendAjax1(pageNum1);
			});
			
			// 6.选择显示记录数的下拉框事件
			$(document).on("change","#selectPageSize",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax1(1);
			});
			
			// 7.搜索事件
			$(document).on("click","#searchBtn",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax1(1);
			});
			
			// 8.清除搜索事件
			$(document).on("click","#clearSearchBtn",function(){
				$("#kw").val("");
				// 调用发送异步请求的方法,参数是页码
				sendAjax1(1);
			});
			
			//9.删除事件
			$(document).on("click",".delete_order",function(){
				 if(window.confirm("是否确定删除")){
					  var orderNo = $("#orderId").text();
					  console.log("自定义："+orderNo);
					  var num = "1";
					  $.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/UserUpdateServlet",
							type:"GET",
							data:{op:"deleteByOrderNo",
								  orderNo:orderNo,
								  homeNameKey:$("#kw").val(),
								  userNo:userNo,
								  num:num,
								  pageNum: $("#pageInfo1").data("pagenum1"),
								  pageSize:$("#selectPageSize").val()
							},
							dataType:"json",
							success:function(result,status,xhr){
								// 调用数据渲染的方法
								showData1(result);
							},
							error:function(xhr,status,error){
								alert("异步请求失败!");
							}
					  });
				  }
			});
			//10.评论事件
			$(document).on("click",".orderState",function(){
				
			})
			
		})
		/*发送ajax异步请求
		  参数：pageNum 页码
		*/
		function sendAjax1(pageNum1){
			var userNo = "${sessionScope.user.userId}";
			 var num = "1";
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/UserUpdateServlet",
				type:"GET",
				data:{op:"getOrderListByPage",
					  homeNameKey:$("#kw").val(),
					  userNo:userNo,
					  num:num,
					  pageNum:pageNum1,
					  pageSize:$("#selectPageSize").val()
					  },
				dataType:"json",
				success:function(result,status,xhr){
					console.log("页面结果："+result);
					// 调用数据渲染的方法
					showData1(result);
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});
		}
		/*渲染数据
		*/
		function showData1(result){
			// 0.清空表格原始数据
			$("#content_order").empty();
			// 0.清空分页信息原始数据
			$("#DataTables_pageInfo").empty();
			// 1.填充表格数据
			$.each(result.data,function(index,orderInfo){
				var time = "${sessionScope.formatDate}";
				console.log("zzzzzzzz  "+time);
				if(orderInfo.orderState == 0){
					$("#content_order").append("<tr align=\"center\">"+
							"<td class=\"  sorting_1\" id=\"orderId\">"+orderInfo.orderId+"</td>"+
							"<td>"+orderInfo.roomInfo.homeInfo.homeName+orderInfo.roomInfo.roomId+"</td>"+
							"<td>"+orderInfo.roomInfo.roomPrice+"</td>"+
							"<td><a href=\"payindex.jsp\">去支付</a></td>"+
							"<td>"+time+"</td>"+
							"<td>"+
							  "<a href=\"javascript:void(0)\" class=\"delete_order\" data-orderNo=\"'"+orderInfo.orderId+"'\"><i class=\"icon-remove\"></i>删除</a>"+
							  "</td>"+
							"</tr>");
				}else if(orderInfo.orderState == 1){
					$("#content_order").append("<tr align=\"center\">"+
							"<td class=\"  sorting_1\" id=\"orderId\">"+orderInfo.orderId+"</td>"+
							"<td>"+orderInfo.roomInfo.homeInfo.homeName+orderInfo.roomInfo.roomId+"</td>"+
							"<td>"+orderInfo.roomInfo.roomPrice+"</td>"+
							"<td>"+"已支付"+"</td>"+
							"<td>"+time+"</td>"+
							"<td>"+
							  "<a href=\"javascript:void(0)\" class=\"delete_order\" data-orderNo=\"'"+orderInfo.orderId+"'\"><i class=\"icon-remove\"></i>删除</a>"+
							  "<a href=\"${pageContext.request.contextPath}/front/comment.jsp?orderId="+orderInfo.orderId+"\"><i class=\"icon-remove\"></i>去评论</a>"+
							  "</td>"+
							"</tr>");
				}
			});
			
			// 2.填充分页信息
			// 2.1 分页信息
			$("#DataTables_pageInfo").append("<span id=\"pageInfo1\" data-pagenum1=\""+
					result.pageNum+"\"  data-pagesize1=\""+
					result.pageSize+"\"  data-pagetotal1=\""+
					result.total+"\"  data-pagepages1=\""+
					result.pages+"\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">每页"+result.pageSize+"条 共"+result.total+"条 第"+result.pageNum+"/"+result.pages+"页</span>");
			
			// 2.2 首页 上一页
			$("#DataTables_pageInfo").append("<a tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"first1\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">首页</a>"+
					"<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"previous1\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">上一页</a>");
			
			// 2.3页码显示
			for(var i=1; i<= result.pages; i++){
				// 判断i==当前页,添加样式ui-state-disabled不可以用,激活状态
				if(i == result.pageNum){
					$("#DataTables_pageInfo").append(
							"<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled\" style=\"background:deepskyblue;padding:0px 3px;border: 0.1px solid gray;\">"+i+"</a>");
				}else{
					$("#DataTables_pageInfo").append(
							"<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current1\">"+i+"</a>");
				}
				
			}
				
			// 2.4下一页 尾页
			$("#DataTables_pageInfo").append("<a tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"next1\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">下一页</a>"+
			"<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"last1\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">尾页</a>");
		}
		
	</script>
	
<!-- --------收藏信息列表-------- -->
<script type="text/javascript">
		$(document).ready(function(){
			$(document).on("click",".collectionInfo",function(){
				sendAjax(1);
			});
			
			// 1.首页
			$(document).on("click","#first",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 2.尾页
			$(document).on("click","#last",function(){
				// 获取总页数
				var lastPageNum = $("#pageInfo").data("pagepages");
				var pageNum = lastPageNum;
				// 调用发送异步请求的方法,参数是页码
				sendAjax(pageNum);
			});
			
			// 3.上一页
			$(document).on("click","#previous",function(){
				// 获取当前页
				var currentPageNum = $("#pageInfo").data("pagenum");
				if(currentPageNum==1){
					alert("已经是第一页,没有上一页!")
				}else{
					var pageNum = parseInt(currentPageNum)-1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax(pageNum);
				}
			});
			
			// 4.下一页
			$(document).on("click","#next",function(){
				// 获取当前页
				var currentPageNum = $("#pageInfo").data("pagenum");
				// 获取总页数
				var lastPageNum = $("#pageInfo").data("pagepages");
				if(currentPageNum==lastPageNum){
					alert("已经是最后一页,没有下一页!")
				}else{
					var pageNum = parseInt(currentPageNum)+1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax(pageNum);
				}
			});
			
			// 5.页码点击事件
			$(document).on("click",".current",function(){
				 var pageNum = $(this).text();
				// 调用发送异步请求的方法,参数是页码
				 sendAjax(pageNum);
			});
			
			// 6.选择显示记录数的下拉框事件
			$(document).on("change","#selectPageSize1",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 7.搜索事件
			$(document).on("click","#searchBtn1",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 8.清除搜索事件
			$(document).on("click","#clearSearchBtn1",function(){
				$("#kw1").val("");
			});
			
			//9.删除事件
			$(document).on("click",".delete_collectionInfo",function(){
				 if(window.confirm("是否确定删除")){
					 var collectionNo = $(this).attr("data-collectionNo");
					 console.log(collectionNo);
					  $.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/UserUpdateServlet",
							type:"GET",
							data:{op:"deleteByCollectionNo",
								  collectionNo:collectionNo,
								  homeNameKey:$("#kw").val(),
								  pageNum: $("#pageInfo").data("pagenum"),
								  pageSize:$("#selectPageSize").val()
							},
							dataType:"json",
							success:function(result,status,xhr){
								// 调用数据渲染的方法
								showData(result);
							},
							error:function(xhr,status,error){
								alert("异步请求失败!");
							}
					  });
				  }
			});
			
		})
		/*发送ajax异步请求
		  参数：pageNum 页码
		*/
		function sendAjax(pageNum){
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/UserUpdateServlet",
				type:"GET",
				data:{op:"getCollectionListByPage",
					  homeNameKey:$("#kw1").val(),
					  pageNum:pageNum,
					  pageSize:$("#selectPageSize1").val()
					  },
				dataType:"json",
				success:function(result,status,xhr){
					// 调用数据渲染的方法
					showData(result);
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});
		}
		/*渲染数据
		*/
		function showData(result){
			// 0.清空表格原始数据
			$("#content_collection").empty();
			// 0.清空分页信息原始数据
			$("#DataTables_pageInfo1").empty();
			// 1.填充表格数据
			$.each(result.data,function(index,collectionInfo){
				$("#content_collection").append("<tr align=\"center\">"+
						"<td class=\"  sorting_1\">"+collectionInfo.homeInfo.homeId+collectionInfo.userInfo.userId+"</td>"+
						"<td>"+collectionInfo.homeInfo.homeName+"</td>"+
						"<td>"+"123"+"</td>"+
						"<td>"+
						  "<a href=\"javascript:void(0)\" class=\"delete_collectionInfo\" data-collectionNo=\""+collectionInfo.collectionId+"\"><i class=\"icon-remove\"></i>删除</a>"+
						 "</td>"+
						"</tr>");
			});
			
			// 2.填充分页信息
			// 2.1 分页信息
			$("#DataTables_pageInfo1").append("<span id=\"pageInfo\" data-pagenum=\""+
					result.pageNum+"\"  data-pagesize=\""+
					result.pageSize+"\"  data-pagetotal=\""+
					result.total+"\"  data-pagepages=\""+
					result.pages+"\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">每页"+result.pageSize+"条 共"+result.total+"条 第"+result.pageNum+"/"+result.pages+"页</span>");
			
			// 2.2 首页 上一页
			$("#DataTables_pageInfo1").append("<a tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"first\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">首页</a>"+
					"<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"previous\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">上一页</a>");
			
			// 2.3页码显示
			for(var i=1; i<= result.pages; i++){
				// 判断i==当前页,添加样式ui-state-disabled不可以用,激活状态
				if(i == result.pageNum){
					$("#DataTables_pageInfo1").append(
							"<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled\" style=\"background:deepskyblue;padding:0px 3px;border: 0.1px solid gray;\">"+i+"</a>");
				}else{
					$("#DataTables_pageInfo1").append(
							"<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\">"+i+"</a>");
				}
				
			}
				
			// 2.4下一页 尾页
			$("#DataTables_pageInfo1").append("<a tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"next\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">下一页</a>"+
			"<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"last\" style=\"margin: 1px 3px;border: 0.1px solid gray;\">尾页</a>");
		}
		
	</script>
   
	</body>
</html>